<template>
  <div class="box">
    <p class="p">
      这是p
      <span>这是span</span>
    </p>
  </div>
  <div class="box2"></div>

  <div class="box3"></div>
  <div class="box4"></div>
  <hr />
  <div class="box5">5</div>
  <div class="box6">6</div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
// sass变量
$bgc: #dc11a2;

.box {
  width: 400px;
  height: 400px;
  background-color: $bgc;

  // 选择器嵌套
  .p {
    width: 300px;
    height: 300px;
    background-color: #5cc671;

    span {
      color: #fff;
      cursor: pointer;

      // 代表当前选择器
      &:hover {
        color: red;
      }
    }
  }
}

// sass运算 算数运算
/*
  + - * /

  / 在某些场景下 不会解析成 除法  解析css中 分割符号  /     font: 20px / 2; font-size: 20px; line-height: 2em;


  特定场景下 scss才认为是 除法运算
    1 参与其他运算   100px + 200px / 2; 
    2 加了小括号  (100px/2);
    3 有变量参数   $width/ 2;

    其他 都会解析成css 分隔符号
*/
$width: 400px;

.box2 {
  width: 100px + 200px;
  height: $width / 2;
  background-color: #39bcd3;
}

// 继承一个类
.box3 {
  width: 300px;
  height: 300px;
  background-color: #56bd0c;
  margin: 20px auto;
}

// 继承 .box3样式
.box4 {
  @extend .box3;
  border-radius: 10px;
}

// mixin 混入 混合 宏
// 定义 混入关键字 @mixin定义
// 定义普通不带参数 混入
@mixin box {
  width: 300px;
  height: 300px;
  background-color: #8c0b79;
}

// 使用 @include关键字 调用 混入
.box5 {
  @include box;
}

// 定义带参数的混入
@mixin box2($bgc: #ea6a2f) {
  width: 200px;
  height: 200px;
  background-color: $bgc;
}

// 使用带参数的混入
.box6 {
  @include box2(#a9ceb8);
}
</style>
